<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-11-28 09:20:08
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-06-26 08:37:01
 * @FilePath: /massage2_a510/src/components/Auestionnaried/Auestionnaried.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="core">
    <!-- 第零页 -->
    <div class="detail">
      <div class="detail_title">详情</div>
      <div class="detail_desc">
        <div>会员ID：{{ vipid ? vipid : "XXXX" }}</div>
        <div>手机号码：{{ phone ? phone : "XXXX" }}</div>
        <div>
          设备型号：{{ produce ? produce : produce == 0 ? "全部机型" : "XXXX" }}
        </div>
      </div>
      <div class="detail_title">卷名：{{ questionName }}</div>
    </div>
    <div class="wenjuan" v-for="(item, index) in data" :key="index">
      <div class="danxuan" v-if="item.questionType == 1">
        <div class="timu">
          <img width="20px" src="../images/required.png" alt="" />{{
            index + 1
          }}. {{ item.questionContent }}?
        </div>
        <div class="xuanxiang">
          <el-radio-group
            v-model="item.answerValue.optionContent"
            style="margin-left: 1.25rem"
          >
            <el-radio
              disabled
              style="margin-bottom: 2rem"
              v-for="items in item.options"
              :key="items.id"
              :label="items.optionContent"
            >
              {{ items.optionContent }}</el-radio
            >
          </el-radio-group>
        </div>
      </div>
      <div class="duoxuan" v-else-if="item.questionType == 2">
        <div class="timu">
          <img width="20px" src="../images/required.png" alt="" />
          {{ index + 1 }}. {{ item.questionContent }}？
          {{ item.selectNum ? `(最多选${item.selectNum}项)` : "(可多选)" }}
        </div>
        <div class="xuanxiang">
          <el-checkbox-group
            v-model="item.answerValue"
            :max="item.selectNum ? item.selectNum : 100"
            style="margin-left: 1.25rem"
          >
            <el-checkbox
              disabled
              style="margin-bottom: 2rem"
              v-for="items in item.options"
              :key="items.id"
              :label="items.optionContent"
              >{{ items.optionContent }}
              <img
                width="20px"
                v-show="
                  items.jump == 2 &&
                    item.answerValue.includes(items.optionContent)
                "
                src="../images/required.png"
                alt=""/>
              <input
                disabled
                v-show="
                  items.jump == 2 &&
                    item.answerValue.includes(items.optionContent)
                "
                style="width: 70px; height: 20px"
                v-model="items.value"
                type="text"
            /></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="tiankong" v-else-if="item.questionType == 3">
        <div class="timu">
          <img width="20px" src="../images/required.png" alt="" />
          {{ index + 1 }}{{ item.questionContent }}？ (填空)
        </div>
        <el-tooltip
          class="item"
          effect="dark"
          :offset="200"
          :hide-after="0"
          :content="item.answerValue"
          placement="bottom"
          popper-class="tooltip"
        >
          <el-input
            disabled
            style="margin-left: 1.25rem"
            type="text"
            v-model="item.answerValue"
          ></el-input>
        </el-tooltip>
      </div>
    </div>
    <div @click="closeDetail" class="closePage">关闭</div>
    <!-- 第零页 -->
  </div>
</template>

<script>
import { getDeviceMaintainList } from "@/base/api/DeviceMaintainApi";
export default {
  data() {
    return {
      selectIndex: 0,
      data: [],
      questionid: "",
      produce: "",
      questionName: "",

      vipid: "",
      //单选

      arr: []
    };
  },
  props: {
    detailData: {
      type: Object,
      default: {}
    },
    isShow: {
      type: Boolean,
      default: false
    },
    phone: {
      type: String,
      default: 0
    }
  },
  watch: {
    isShow() {
      this.data = this.detailData.questionnaireSpecificVos;
      this.vipid = this.detailData.id;
      this.getProduct(this.detailData.modelId);
      this.questionName = this.detailData.questionnaireName;
      console.log(this.detailData);
      //将所有数据做一个集中处理
      this.data.forEach(item => {
        //单选数据处理
        if (item.questionType == 1) {
          let map = {
            A: 0,
            B: 1,
            C: 2,
            D: 3,
            E: 4,
            F: 5,
            G: 6,
            H: 7,
            I: 8,
            J: 9,
            K: 10,
            L: 11,
            M: 12,
            N: 13,
            O: 14,
            p: 15,
            Q: 16,
            R:17
          };
          item.options.forEach((item0, index0) => {
            if (map[item.answerValue] == index0) {
              item.answerValue = item0.optionContent;
            }
          });
        }
        //多选数据处理
        else if (item.questionType == 2) {
          let map1 = {
            A: 0,
            B: 1,
            C: 2,
            D: 3,
            E: 4,
            F: 5,
            G: 6,
            H: 7,
            I: 8,
            J: 9,
            K: 10,
            L: 11,
            M: 12,
            N: 13,
            O: 14,
            p: 15,
            Q: 16,
            R:17
          };
          item.options.forEach(item4 => {
            item4.value = "";
          });
          let selectArr = [];
          //将选中的答案进一步做处理
          item.answerValue.forEach(item3 => {
            item.options.forEach((item2, index2) => {
              //先定义一个值来存储填写的数据
              if (map1[item3.options] == index2) {
                item2.value = item3.custom_content;
                console.log(item2.value);
                selectArr.push(item2.optionContent);
              }
            });
          });
          item.answerValue = [];
          item.answerValue = selectArr;
        } else {
        }
      });
      // for (let index = 0; index < this.data.length; index++) {
      //   if (this.data[index].questionType == 0) {
      //     //单选答案
      //     let answer =
      //       this.data[index].answerValue == "A"
      //         ? 0
      //         : this.data[index].answerValue == "B"
      //         ? 1
      //         : this.data[index].answerValue == "C"
      //         ? 2
      //         : 3;
      //     this.danValue["dan_data" + index] = this.data[index].options[answer];
      //   }
      //   if (this.data[index].questionType == 1) {
      //     var str = this.data[index].answerValue;
      //     var arr = str.split(",").map(function (char) {
      //       return char.charCodeAt(0) - 65;
      //     });
      //     arr.forEach((item) => {
      //       this.duoValue["duo_data" + index].push(
      //         this.data[index].options[item]
      //       );
      //     });
      //   }
      //   if (this.data[index].questionType == 2) {
      //     this.inputValues["tian_data" + index] = this.data[index].answerValue;
      //   }
      // }
    }
  },
  created() {
    //拿到所有机型所对应的型号
  },
  methods: {
    //提交信息
    closeDetail() {
      this.$emit("close", 1);
    },
    getProduct(id) {
      getDeviceMaintainList({
        pageIndex: 1,
        pageSize: 1000,
        sortId: 1324949759328288,
        sortDirection: "DESC"
      }).then(res => {
        this.produce = res.data.items.filter(item => {
          return item.id == id;
        })[0].modelName;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.core {
  width: 600px;
  padding: 0 40px 40px 40px;
  border: 1px solid rgba(61, 58, 58, 0.3);
  // border: 1px solid black;
  height: 75vh;
  overflow-y: scroll;
}
.title {
  color: black;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
}
.wenjuan {
  margin-top: 3rem;

  .timu {
    color: black;
    font-size: 1rem;
  }
  .xuanxiang {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
  }
}
.footer {
  display: flex;
  justify-content: center;
}
/deep/ .el-input__inner {
  margin-top: 3rem;
}
/deep/ .el-button {
  width: 10rem;
  margin-top: 4rem;
}
.Rewardreminder {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8%;
  width: 50%;
  height: 50%;
  background-color: rgb(28, 21, 78);
  color: white;
  position: fixed;
  top: 20%;
  left: 25%;
  z-index: 10000;
  font-size: 1.3rem;
}

/deep/ .el-checkbox .is-checked {
  background-color: #fff;
}
.closePage {
  cursor: pointer;
  width: 100px;
  height: 30px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1791d5;
  margin-left: 180px;
  margin-top: 20px;
}
.detail {
  .detail_title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
  }
  .detail_desc {
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 600;
    div {
      margin-right: 20px;
      margin-top: 10px;
    }
  }
}
</style>
